<template>
  <div id="changedialog">
    <commonformdialog
      :isshowDialogs="isshowDialog"
      :dialogTitle="dialogTitle"
      @closetextDialog="closetextDialog"
      @confirmbtn="confirmbtn"
    >
      <div class="innerLoding">
        <el-row>
          <el-form
            :model="formData"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            size="small"
          >
           <el-row>
              <el-col :span="24">
                <el-form-item label="城市:" prop="city_id">
                  <el-cascader
                    ref="cascader"
                    style="width:100%"
                    v-model="formData.city_id"
                    :options="cityoptions"
                    :props="{ expandTrigger: 'hover', checkStrictly: true }"
                    clearable
                    :show-all-levels="false"
                    @change="handleChange"
                  ></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
             <el-row>
              <el-col :span="24">
                <el-form-item label="高校:" prop="university_id">
                  <el-select
                    v-model="formData.university_id"
                    placeholder="请选择高校"
                    style="width: 100%"
                  >
                    <el-option
                      :label="item.title"
                      :value="item.id"
                      v-for="(item, index) in universityOption"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
             <el-row>
              <el-col :span="24">
                <el-form-item label="报名点名称:" prop="title">
                  <el-input type="text"  placeholder="请输入报名点名称" v-model="formData.title"></el-input>
                </el-form-item>
              </el-col>
            </el-row>  
             <el-row>
              <el-col :span="24">
                <el-form-item label="驾校名称:" prop="school_name">
                  <el-input type="text" placeholder="请输入驾校名称" v-model="formData.school_name"></el-input>
                </el-form-item>
              </el-col>
            </el-row>  
            <el-row>
              <el-col :span="24">
                <el-form-item label="地址:" prop="address">
                  <el-input placeholder="请输入地址" v-model="formData.address">
                    <template slot="append"
                      ><span @click="showMapSelecte">选择</span></template
                    >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="距离:" prop="distance">
                  <el-input placeholder="请输入距离" v-model="formData.distance">
                    <template slot="append"
                      ><span>KM</span></template
                    >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-row>
      </div>
    </commonformdialog>
    <selecteMap
      :mapData="mapData"
      :showmap="isshowDialogMAP"
      :maptitle="dialogTitleMAP"
      @closetextDialogMap="closetextDialogMAP"
      @confirmbtnMap="confirmbtnMAP"
    ></selecteMap>
  </div>
</template>

<script type="text/javascript">
//引入弹窗
import commonformdialog from "@/components/commondialog/commondialog";
import uploadimg from "@/components/uploadimg/uploadimg";
import selecteMap from "@/components/selecteMap";
import {
  teamCreate,
teamUpdate,
universityOption
} from "@/api/schoolResources";

export default {
  data() {
    return {
      defaultMsg: "",
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 350,
        zIndex: 2021,
      },
      ue1: "ue1",
      showPicker: false,
      multipleopen: true,
      universityOption: [],
      formData: {
        city_id: "",
        university_id: "",
        title: "",
        school_name: "",
        address: "",
        distance: "",
      },
      rules: {
        city_id: [{ required: true, message: "请选择城市", trigger: "blur" }],
        university_id: [{ required: true, message: "请选择高校", trigger: "blur" }],
        title: [{ required: true, message: "请输入报名点名称", trigger: "blur" }],
        school_name: [{ required: true, message: "请输入驾校名称", trigger: "blur" }],
        address: [{ required: true, message: "请选择学校地址", trigger: "blur" }],
        distance: [{ required: true, message: "请输入与高校距离", trigger: "blur" }],

      },
      isshowDialogMAP: false,
      dialogTitleMAP: "选择地址",
      mapData: {},
      selecte: true,
    };
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: "",
      required: true,
    },
    //是编辑还是新增
    formType: {
      type: Number,
      default: 0,
    },
    dialogdata: {
      type: Object,
    },
    cityoptions: {
      type: Array,
    },
  },
  components: {
    commonformdialog,
    uploadimg,
    selecteMap,
  },
  methods: {
    handleChange() {
      const obj = this.$refs["cascader"].getCheckedNodes();
      if (obj[0]) {
        this.formData.city_id = obj[0].value;
      }
    },
    showMapSelecte() {
      this.isshowDialogMAP = true;
      let { lat, lng, address } = this.formData;
      this.$nextTick(() => {
        this.mapData = { lat, lng, address };
      });
    },
    closetextDialogMAP() {
      this.isshowDialogMAP = false;
    },
    confirmbtnMAP(val) {
      if (val) {
        let { lat, lng, address } = val;
        this.formData.lat = lat;
        this.formData.lng = lng;
        this.formData.address = address;
        this.mapData = { lat, lng, address };
      }
      this.isshowDialogMAP = false;
    },
    closetextDialog() {
      this.$emit("closedialog");
    },
    //删除图片
    picturedel() {
      this.formData.head_img = "";
    },
    //上传图片成功
    pictureok(val) {
      this.formData.head_img = val.url;
    },
    confirmbtn() {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (!valid) return;
        let {
          city_id,
          university_id,
          title,
          school_name,
          distance,
          address,
          lat,
          lng,
        } = this.formData;
        let params = {
          city_id,
          university_id,
          title,
          school_name,
          distance,
          address,
          lat,
          lng,
        };
        let data;
        if (this.formType == 0) {
          data = await teamCreate(params);
        } else {
          params.id = this.formData.id;
          data = await teamUpdate(params);
        }
        if (data.code == "0000") {
          this.$message({
            type: "success",
            message: data.msg,
          });
          this.$emit("confirm");
        }
      });
    },
    //获取选项
    async getuniversityOption(cityId){
      let data=await universityOption({city:cityId})
        this.universityOption=data.data
    },
   
  },
  watch: {
    isshowDialog: function (val) {
      if (!val) {
        this.$refs["ruleForm"].resetFields();
      }
    },
    dialogdata: function (val) {
      this.$nextTick(() => {
        this.formData = val;
      });
    },
    'formData.city_id'(val){
      if(val){
        this.getuniversityOption(val)
      }
    }
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-input-group__append {
    cursor: pointer;
  }
}
</style>
